<template>
  <el-dialog
    v-model="dialogVisible"
    class="dialog_body"
    :title="`模具派工`"
    width="1200"
    @close="close"
  >
    <div class="mold-item">
      <div class="filed-row">
        <div class="item-filed" style="flex: 1">
          <div class="item-title">模型编码</div>
          <div class="item-value">{{ state.moldCavityItem?.moldCode }}</div>
        </div>
        <div class="item-filed" style="flex: 1">
          <div class="item-title">模型名称</div>
          <div class="item-value">{{ state.moldCavityItem?.moldName }}</div>
        </div>
      </div>
      <div class="filed-row">
        <div class="item-filed" style="flex: 1">
          <div class="item-title">模型规格</div>
          <div class="item-value">{{ state.moldCavityItem?.moldSpec }}</div>
        </div>
      </div>
    </div>
    <el-row :gutter="12">
      <el-col
        v-for="(cavityItem, cavIndex) in state.cavityList"
        :key="cavityItem.pkCavity"
        :span="state.span"
      >
        <div style="width: 100%; border: 1px solid #e0e0e0">
          <div class="cavity-item">
            <div class="filed-name" style="margin-bottom: 6px">
              {{ cavityItem.cavityName }}
            </div>
            <div
              style="
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
              "
            >
              <div class="item-filed-content" style="flex: 1">
                <div class="filed-placeholder">编码</div>
                {{ cavityItem.cavityCode }}
              </div>
              <div class="item-filed-content" style="flex: 1">
                <div class="filed-placeholder">型号</div>
                {{ cavityItem.cavitySpec }}
              </div>
            </div>
          </div>

          <div v-if="cavityItem.dispatchItem" class="dispatch-item">
            <div class="jb-scddh">{{ cavityItem.dispatchItem.scddh }}</div>
            <div class="item-filed">
              <div class="filed-name">
                {{ cavityItem.dispatchItem.invname }}
              </div>
              <div class="item-filed-content">
                <div class="filed-placeholder">编码</div>
                {{ cavityItem.dispatchItem.invcode }}
              </div>
              <div class="item-filed-content">
                <div class="filed-placeholder">型号</div>
                {{ cavityItem.dispatchItem.invspec }}
              </div>
              <div class="item-filed-content" style="box-shadow: none">
                <div class="filed-placeholder">规格</div>
                {{ cavityItem.dispatchItem.invtype }}
              </div>
            </div>
            <div style="display: flex">
              <div class="item-filed" style="flex: 1">
                <div class="item-filed-content" style="box-shadow: none">
                  <div class="filed-placeholder">工序</div>
                  {{ cavityItem.dispatchItem.opName }}
                </div>
              </div>
              <div class="item-filed" style="flex: 1; border-left: 0px">
                <div class="item-filed-content" style="box-shadow: none">
                  <div class="filed-placeholder">数量</div>
                  {{ cavityItem.dispatchItem.mQty }}
                </div>
              </div>
            </div>
            <!-- <div class="filed-number">数量</div> -->
            <!-- <el-input-number
              v-model="cavityItem.dispatchItem.mQty"
              :controls="true"
              :min="0"
              size="small"
              :step="1"
              style="width: 100%"
            /> -->
            <el-icon
              class="refresh-btn"
              style="font-weight: bold; color: #ffffff"
              @click="changeDispatchItem(cavityItem, cavIndex)"
            >
              <Refresh />
            </el-icon>
          </div>

          <div
            v-else
            class="empty-item"
            @click="changeDispatchItem(cavityItem, cavIndex)"
          >
            <el-icon :size="48"><plus /></el-icon>
          </div>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="toCancel">取消</el-button>
        <el-button type="primary" @click="toConfirm()">确认</el-button>
      </div>
    </template>
    <SelectDispatchItemByCavity
      ref="selectDispatchItemByCavityRef"
      @select-dispatch-callback="selectDispatchCallback"
    />
  </el-dialog>
</template>
<script setup>
  import SelectDispatchItemByCavity from './SelectDispatchItemByCavityDialog.vue'
  import { getCavityListApi } from '~/src/api/equip/mold_api'
  import { getCavityDispatchDefaultApi } from '@/api/mes/dispatch_api'
  import { Plus, Refresh } from '@element-plus/icons-vue'
  const dialogVisible = ref(false),
    selectDispatchItemByCavityRef = ref()
  let dataCallbackFlag = false
  const state = reactive({
    span: 6,
    cavityList: [],
    dispatchItem: null,
    moldCavityItem: null,
    changCavIndex: -1,
    changeCavItem: null,
    _qty: 0,
  })
  const handleOpen = (moldCavityItem, dispatchItem) => {
    dialogVisible.value = true
    state.dispatchItem = dispatchItem
    state._qty = dispatchItem.mQty
    state.moldCavityItem = moldCavityItem
    queryData()
  }

  const queryData = async () => {
    const { data } = await getCavityListApi({
      pkMoldDoc: state.moldCavityItem.pkMoldDoc,
      state: 1,
    })
    data.forEach((cavityItem) => {
      if (cavityItem.pkCavity === state.moldCavityItem.pkCavity) {
        cavityItem['dispatchItem'] = state.dispatchItem
      }
    })
    state.cavityList = data
    if (state.cavityList && state.cavityList.length <= 4) {
      state.span = 6
    } else {
      state.span = 6
    }
    getCavityDispatch()
  }
  // selectDispatchItemByCavityRef
  const changeDispatchItem = (cavityItem, changCavIndex) => {
    state.changeCavItem = cavityItem
    state.changCavIndex = changCavIndex
    selectDispatchItemByCavityRef.value.handleOpen(cavityItem.pkCavity)
  }
  const getCavityDispatch = async () => {
    const mParam = {
      ...state.moldCavityItem,
      cavityList: state.cavityList,
    }
    const { data } = await getCavityDispatchDefaultApi(mParam)
    changeQty(data.cavityList)
    state.cavityList = data.cavityList
  }

  const changeQty = (data) => {
    data.forEach((cavityItem) => {
      if (
        cavityItem.dispatchItem &&
        cavityItem.dispatchItem.dispatchQty >= state._qty
      ) {
        cavityItem.dispatchItem['mQty'] = state._qty
      } else if (cavityItem.dispatchItem) {
        state._qty = cavityItem.dispatchItem.dispatchQty
        changeQty(data)
      }
    })
  }

  defineExpose({
    handleOpen,
  })

  const toCancel = () => {
    dialogVisible.value = false
  }
  const close = () => {
    if (!dataCallbackFlag) {
      _emits('cancelCallback')
    }
  }
  const toConfirm = () => {
    _emits('moldDispatchCallback', state.moldCavityItem, state.cavityList)
    dataCallbackFlag = true
    dialogVisible.value = false
  }
  const selectDispatchCallback = (dItem) => {
    if (state.changeCavItem) {
      state.changeCavItem['dispatchItem'] = dItem
      changeQty(state.cavityList)
    }
  }
  const _emits = defineEmits(['moldDispatchCallback', 'cancelCallback'])
</script>
<style lang="scss" scoped>
  .mold-item {
    width: 100%;
    height: 88px;
    padding: 6px;
    margin-bottom: 6px;
    background: url(~@/assets/jb/ca-item.png);
    border-radius: 5px;
    .filed-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      .item-filed {
        padding: 0px 6px;
        margin-bottom: 3px;
        .item-title {
          font-size: 12px;
          font-weight: 500;
          line-height: 14px;
          color: #777;
        }
        .item-value {
          font-size: 16px;
          font-weight: 800;
          line-height: 24px;
        }
      }
    }
  }
  // .dialog_body {
  :deep(.el-dialog) {
    .el-dialog__body {
      padding: 6px 12px;
      background-color: #f6f8ff;
    }
  }
  // }

  :deep(.el-input__wrapper) {
    padding: 0;
    background-color: transparent;
    // border-bottom: 1px solid #ffffff;
    border-radius: 0;
    box-shadow: none;
  }
  :deep(.el-input__inner) {
    color: #ffffff;
  }

  .cavity-item {
    width: 100%;
    padding: 6px;
    background: url(~@/assets/jb/cavity-item.png);
    .filed-name {
      font-size: 14px;
      font-weight: 600;
      line-height: 16px;
      color: #333;
    }
    .filed-placeholder {
      font-size: 10px;
      font-weight: 400;
      line-height: 14px;
      color: #999;
    }
    .item-filed-content {
      margin-bottom: 3px;
      font-size: 14px;
      font-weight: 500;
      line-height: 16px;
      color: #777;
      box-shadow: 0 1px 0 0 #ebecec;
    }
  }
  .dispatch-item {
    position: relative;
    padding: 3px;
    background: linear-gradient(
      180deg,
      #ecf2ff 0%,
      rgba(255, 255, 255, 0.1) 60%
    );
    border: 2px solid #ffffff;
    border-radius: 3px;
    box-shadow: 0 4px 16px rgba(55, 99, 170, 0.1);
    transition: box-shadow 0.3s ease-in-out;
    &:hover {
      box-shadow: 0 4px 16px rgba(55, 99, 170, 0.2);
    }
    &:hover::before {
      position: absolute;
      top: -2px;
      left: -2px;
      z-index: 0;
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      content: '';
      border: 1px solid #0052d9;
    }
    .refresh-btn {
      position: absolute;
      top: 4px;
      right: 6px;
      z-index: 99999;
    }
    .jb-scddh {
      position: relative;
      width: 100%;
      height: 16px;
      padding-left: 6px;
      margin-bottom: 3px;
      font-size: 12px;
      font-weight: bold;
      line-height: 16px;
      color: white;
      text-align: left;
      background: linear-gradient(45deg, #4793ff, #0064e4);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    }
    .item-filed {
      padding: 0px 6px;
      margin-bottom: 3px;
      border: 1px solid rgb(235, 236, 236);
      .filed-name {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        color: #333;
      }
      .filed-placeholder {
        font-size: 10px;
        font-weight: 400;
        line-height: 14px;
        color: #999;
      }
      .item-filed-content {
        margin-bottom: 3px;
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
        color: #777;
        box-shadow: 0 1px 0 0 #ebecec;
      }
    }
    .filed-number {
      padding-left: 6px;
      font-size: 10px;
      font-weight: 400;
      line-height: 14px;
      line-height: 16px;
      color: #999;
    }
    :deep(.el-input__wrapper) {
      padding: 0;
      background-color: transparent;
      // border-bottom: 1px solid #ffffff;
      border: 1px solid #f0f1f2;
      border-radius: 0;
      box-shadow: none;
    }
    :deep(.el-input__inner) {
      font-weight: 600px;
      color: #333;
    }
    :deep(.el-tag) {
      height: 16px;
      padding: 0 3px;
    }
    .dispatch-item-filed {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .dispatch-item-value {
      flex: 1;
      padding: 0 6px;
    }
  }
  .empty-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 227px;
    // height: calc(100% - 40px);
    background-color: #f8e3c5;
  }
</style>
